<!--
  author: tangcheng_cd
  create by: 2018/6/1
  descr:
-->
<template>
  <el-dialog
    :title="resetPassword ? '重置' : '修改密码'"
    :visible.sync="dialogVisiable"
    v-model="dialogMode"
    @close="close"
    class="user-reset-pwd"
    width="422px">
    <el-form
      ref="form"
      :model="formData"
      :rules="formRules"
      label-width="120px"
      :label-position="'right'">
      <el-row :gutter="24">
        <el-col :span="24">
          <template v-if="resetPassword">
            <el-form-item label="密码" prop="newPassword">
              <el-input v-model="formData.newPassword"
                        size="mini"
                        type="password"
                        placeholder="请在此输入">
              </el-input>
            </el-form-item>
          </template>
          <template v-else>
            <el-form-item label="原密码" prop="password">
              <el-input v-model="formData.password"
                        size="mini"
                        type="password"
                        placeholder="请在此输入">
              </el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="newPassword">
              <el-input v-model="formData.newPassword"
                        size="mini"
                        type="password"
                        placeholder="请在此输入">
              </el-input>
            </el-form-item>
          </template>
          <el-form-item label="确认密码" prop="confirm_password">
            <el-input v-model="formData.confirm_password"
                      size="mini"
                      type="password"
                      placeholder="请在此输入">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close" class="dialog-btn">关闭</el-button>
      <el-button @click="submitFormData" type="primary" class="dialog-btn">确定</el-button>
    </span>
  </el-dialog>
</template>

<script type="text/ecmascript-6">
export default {
  name: 'user-reset-password',
  props: ['resetPassword'],
  data () {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'))
        } else {
          if (this.formData.confirm_password !== '') {
            this.$refs.form.validateField('confirm_password')
          }
          callback()
        }
      }
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'))
        } else if (value !== this.formData.newPassword) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      }
    return {
      dialogVisiable: false, // 新增对话框显示控制
      dialogMode: { // 对话框色对话框模式  ADD新增 MODIFY 修改
        type: String,
        default: 'ADD'
      }, // 对话框模式
      formData: {
        password: '',
        newPassword: '',
        confirm_password: ''
      }, // 新增对话框表单数据
      formRules: {
        password: [ // 密码
          { required: true, message: '此项为必输项', trigger: 'blur' },
          { min: 6, max: 32, message: '长度在 6 到 32 个字符', trigger: 'blur' },
          { validator: validatePass, trigger: 'blur' }
        ],
        newPassword: [ // 新密码
          { required: true, message: '此项为必输项', trigger: 'blur' },
          { min: 6, max: 32, message: '长度在 6 到 32 个字符', trigger: 'blur' },
          { validator: validatePass, trigger: 'blur' }
        ],
        confirm_password: [
          { required: true, message: '此项为必输项', trigger: 'blur' },
          { min: 6, max: 32, message: '长度在 6 到 32 个字符', trigger: 'blur' },
         { validator: validatePass2, trigger: 'blur' }
         ]
      }, // 新增对话框表单项规则
      options: {}
    }
  },
  methods: {
    // 显示
    show (options) {
      this.options = options
      this.dialogVisiable = true
    },
    // 关闭
    close () {
      this.dialogVisiable = false
      // 清空数据
      this.formData = {}
      // 清除验证
      this.$refs.form.clearValidate()
    },
    // 确认重设密码
        submitFormData () {
        this.$refs.form.validate((valid) => {
          if (valid) {
            if (this.options && this.options['onConfirm']) {
              if (this.resetPassword) {
                this.options.onConfirm(this.formData.newPassword, this.formData.confirm_password)
              } else {
                this.options.onConfirm(this.formData.password, this.formData.newPassword, this.formData.confirm_password)
              }
            }
          } else {
            return false
          }
        })
      }
     }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
.user-reset-pwd
  .msg-box
    text-align center !important
    height 30px !important
    line-height 30px !important
    font-size 16px !important
    color #333 !important
    word-wrap break-word !important
</style>
